import React, { Component } from 'react'
import './index.css'

export default class Item extends Component {

    //标识鼠标移入、移出
    state = {
        mouse:false
    }

    //鼠标移入、移出的回调
    handleMouse = (flg) =>{
        return (event)=>{
            this.setState({
                mouse:flg
            })
        }
    }

    // 勾选或取消勾选某一个的回调
    handleCheck = (id) =>{
        return (event)=>{
            this.props.updatas(id,event.target.checked)
        
        }
    }
    render() {
        const {id,work,isright} = this.props
        const {mouse} = this.state
        return (
            <li style={{backgroundColor:mouse? '#ddd' : 'white'}} onMouseLeave={this.handleMouse(false)} onMouseEnter={this.handleMouse(true)}>
                <label>
                    <input onChange={this.handleCheck(id)} type="checkbox" defaultChecked={isright}/>
                    <span>{work}</span>
                </label>
                <button className="btn btn-danger" style={{display:mouse? 'block':'none'}}>删除</button>
            </li>
        )
    }
}
